import React, { Component } from 'react'
import './index.css'

export default class Item extends Component {
    render() {
        //拿到List组件传递的当前信息
        //<Item  key={item.id} {...item} changeDone={changeDone}/>
        //Item:{ id: Date.now(), content: '抽烟', done: true },
        const { content, done } = this.props;
        return (
            <li>
                <label>
                    <input type="checkbox" checked={done} onChange={this.changeChecked} />
                    <span>{content}</span>
                    <button className='btn btn-danger' style={{display:'none'}}>删除</button>
                </label>
            </li>
        )
    }
    //勾不勾选这个任务
    changeChecked = () => {
         const{done,changeDone,id}=this.props;

         //调用App的changeDone方法，把自己当前的状态传递过去
        //调用的时候 还要传递当前点击的item的id，方便App组件进行判断当前点的是哪一个
        changeDone(id,done);
    }
}
